<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" type="text/css"/>
    <script src="${pageContext.request.contextPath}/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/jQuery/jquery.validate.min.js" type="text/javascript"></script>
    <style>
        .input_userInfo, .textarea_userInfo {
            border: none;
        }

        .login .form-control {
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.09);
            box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.09) inset;
            color: #FFFFFF;
        }

        .login .btn-change {
            background-color: #00BBFF;
            border-color: #00BBFF;
            border-width: 0;
            color: #FFFFFF;
            display: block;
            margin: 0 auto;
            padding: 15px 50px;
            text-transform: uppercase;
            width: 100%;
        }

        .login .btn-login:hover {
            background-color: #00A4E4;
            color: #FFFFFF;
        }

        .login .form-control:hover {
            background-color: rgba(0, 0, 0, .16);
        }

        .login .form-control:focus {
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04) inset;
            background-color: rgba(0, 0, 0, 0.23);
            color: #FFFFFF;
        }

        .login .box .form input[type="password"] {
            border-radius: 3px;
            border: none;
            color: #333333;
            font-size: 16px;
            height: 46px;
            margin-bottom: 5px;
            padding: 13px 12px;
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        function changePwd() {
            $('.changePwdBox').fadeIn("fast");
            setTimeout(function () {
                $('#psdModal').modal('show');
            }, 230);
        }
    </script>
    <!-- 引入bootstrap使用 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入css 相对、绝对、相对绝对路径 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"/>
    <!-- js - jQuery、bootstrap -->
    <script src="${pageContext.request.contextPath}/jQuery/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jQuery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="/WEB-INF/view/header.jsp"></jsp:include>
<div class="container" style="height: 500px;">
    <div class="row">
        <div class="col-md-8" height: 500px;
        ">
        <h2>我的帖子</h2>
        <div class="container">
            <div class="row">
                <div class="col-md-7" style="height: 436px;line-height:50px;'">
                    <c:forEach var="i" begin="1" end="${requestScope.listTitle.size()}">
                        <li>
                            <a href="${pageContext.request.contextPath }/article?method=details&userId=${requestScope.listTitle.get(i-1).getUserId()}&articleId=${requestScope.listTitle.get(i-1).getArticleId()}"><font
                                    size="4">${requestScope.listTitle.get(i-1).getTitle()}</font></a></li>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1" style="height: 500px;"></div>
    <div class="col-md-3" style="height: 500px;">
        <div style="height: 75px;">
            <table>
                <tr>
                    <td><img src="${pageContext.request.contextPath}/images/touxiang.png"/ style="padding-left: 10px;">
                    </td>
                    <td><h2 align="center">个人信息</h2></td>
                </tr>
            </table>
        </div>
        <form method="post" action="#">
            <div style="height: 50px;">
                <label class="control-label" style="padding-left: 5px;">用户名</label>&nbsp;&nbsp;&nbsp;&nbsp;
                <input class="input_userInfo" type="text" id="username" value="${ requestScope.user.getUserName()}"
                       readonly="readonly"/>
            </div>
            <div style="height: 50px;">
                <label class="control-label" style="padding-left: 5px;">性&nbsp;&nbsp;&nbsp;别</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input class="input_userInfo" type="text" id="sex" value="${requestScope.user.getSex()}"
                       readonly="readonly"/>
            </div>
            <div style="height: 50px;">
                <label class="control-label" style="padding-left: 5px;">个性签名</label>&nbsp;
                <textarea class="textarea_userInfo" style="height: 50px;vertical-align: top;"
                          readonly="readonly">${requestScope.user.getSignature()}</textarea>
            </div>
            <h4 align="center">扫码关注我呦</h4>
            <div align="center">
                <img src="${pageContext.request.contextPath}/images/self.png" style="width: 150px;"/>
            </div>
            <div style="height: 75px;">
                <c:choose>
                    <c:when test="${!empty requestScope.update}">
                        <table>
                            <tr>
                                <td><a href="javascipt:void(0)" data-toggle="modal" onclick="changePwd();"><img
                                        src="${pageContext.request.contextPath}/images/erase.png"/ style="padding-right:
                                    15px;"></a></td>
                                <td><h4>修改密码</h4></td>
                            </tr>
                        </table>
                    </c:when>
                </c:choose>
            </div>
        </form>

    </div>
</div>
</div>

<div id="psdModal" class="modal fade psd">
    <div class="modal-dialog login animated">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <div class="box">
                    <div class="content">
                        <div class="form changePwdBox">
                            <form id="registForm" method="post" action="${pageContext.request.contextPath }/User"
                                  accept-charset="UTF-8">
                                <input type="hidden" name="method" value="changePwd">
                                <%-- <input id="oldPassword" class="form-control" type="password" placeholder="原密码" name="oldPassword"> --%>
                                <input id="password" class="form-control" type="password" placeholder="新密码"
                                       name="password">
                                <input id="confirmpwd" class="form-control" type="password" placeholder="确认密码"
                                       name="confirmpwd">
                                <input class="btn btn-default btn-change" type="submit" value="确认">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footercopyright" align="center">copyright&copy;&nbsp;&nbsp;MR GAO. 【Blog】</div>

</body>
</html>